<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		<style>
		    body {
		        font-family: Arial, sans-serif;
		        background-color: #f4f4f4;
		        margin: 0;
		        display: flex;
		        justify-content: center;
		        align-items: center;
		        height: 100vh;
		    }
		    #loginForm {
		        background-color: #fff;
		        width: 300px;
		        padding: 20px;
		        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		        border-radius: 8px;
		    }
		    h1 {
		        text-align: center;
		        margin-bottom: 20px;
		    }
		    div {
		        margin-bottom: 15px;
		    }
		    label {
		        display: block;
		        margin-bottom: 5px;
		        font-weight: bold;
		    }
		    input[type="text"], input[type="password"] {
		        width: 100%;
		        padding: 10px;
		        border: 1px solid #ccc;
		        border-radius: 4px;
		    }
		    button {
		        width: 100%;
		        padding: 10px;
		        background-color: #007bff;
		        color: #fff;
		        border: none;
		        border-radius: 4px;
		        cursor: pointer;
		    }
		    button:hover {
		        background-color: #0056b3;
		    }
			#register{
				background-color: #ff0000;
			}
		</style>
	</head>
	<body>
		<!--
			完整的注册登录
			
			1. 注册页
			用户名
			密码
			重复密码
			性别 单选框
			年龄
			爱好 多选框
			学历 下拉框
			用户简介 textarea
			同意协议（复选）
			注册按钮 登录案件
		-->
		<div id="app">
		    <div id="loginForm" v-if="!isLogin">
		        <h1>用户登录</h1>
		        <div>
		            <label for="username">用户名:</label>
		            <input type="text" id="username" v-model="username" />
		        </div>
		        <div>
		            <label for="password">密码:</label>
		            <input type="password" id="password" v-model="password" />
		        </div>
		        <div>
		            <button @click="login">登录</button>
		        </div>
				<div>
					<button id="register">注册</button>
				</div>
		    </div>
		    <div v-else>
		        <p>{{ username }} 已登录</p>
		        <div>
		            <button @click="loginOut">登出</button>
		        </div>
		    </div>
		</div>
		
		<script>
		    var app = Vue.createApp({
		        data() {
		            return {
		                username: '',
		                password: '',
		                isLogin: false
		            }
		        },
		        methods: {
		            login: function () {
		                if (this.username === "admin" && this.password === "123") {
		                    alert("登录成功");
		                    this.isLogin = true;
		                } else {
		                    alert("登录失败");
		                }
		            },
		            loginOut: function () {
		                this.isLogin = false;
		            }
		        }
		    });
		    var vm = app.mount("#app");
		</script>
	</body>
</html>